<template>
  <a-modal @cancel="closeModal" @ok="onFormOk" :visible="true" title="函数文档" width="60%">
    <a-form :model="docForm" class="filer-wrap" :label-col="{ span: 4 }" :wrapperCol="{span:20}">
      <!-- 新增按钮-->
      <a-form-item label="新增选项">
        <a-button type="primary" style="width: 30%;margin-right: 5%;" @click="addItem('params')"> 新增入参</a-button>
        <a-button type="primary" style="width: 30%;margin-right: 5%;" @click="addItem('returns')"> 新增出参</a-button>
        <a-button type="primary" style="width: 30%" @click="addItem('examples')"> 新增使用示例</a-button>
      </a-form-item>
      <!-- 函数入参-->
      <a-form-item v-for="(param, index) in dynamicForm.params"  :key="param.key" :label="index === 0 ? '函数入参' : '  '">
<!--        <a-select  v-model:value="param.type" class="doc-item-margin doc-item-thirty">-->
<!--          <a-select-option v-for="(type,index) in returnTypes" :value="type" :key="index">{{ type }}</a-select-option>-->
<!--        </a-select>-->
        <a-input v-model:value="param.name" placeholder="参数值" class="doc-item-margin doc-item-thirty"/>
        <a-input v-model:value="param.description"  placeholder="参数说明" class="doc-item-margin"/>
        <MinusCircleOutlined  v-if="dynamicForm.params.length > 1" :disabled="dynamicForm.params.length === 1" @click="removeItem('params',param)"  class="doc-item-margin"/>
      </a-form-item>
      <!-- 函数出参-->
      <a-form-item v-for="(returnItem, index) in dynamicForm.returns"  :key="returnItem.key" :label="index === 0 ? '函数出参' : '  '">
<!--        <a-select  v-model:value="returnItem.type" class="doc-item-margin doc-item-thirty">-->
<!--          <a-select-option v-for="(type,index) in returnTypes" :value="type" :key="index">{{ type }}</a-select-option>-->
<!--        </a-select>-->
        <a-input v-model:value="returnItem.description"  placeholder="输出结果说明"  class="doc-item-margin" />
        <MinusCircleOutlined  v-if="dynamicForm.returns.length > 1" :disabled="dynamicForm.returns.length === 1" @click="removeItem('returns',returnItem)" style="margin-left:1%;" />
      </a-form-item>
      <!-- 使用示例-->
      <a-form-item v-for="(example, index) in dynamicForm.examples"  :key="example.key" :label="index === 0 ? '使用示例' : '  '">
        <a-input v-model:value="example.name" placeholder="示例" class="doc-item-margin"/>
        <a-input v-model:value="example.description"  placeholder="输出结果"  class="doc-item-margin" />
        <MinusCircleOutlined  v-if="dynamicForm.examples.length > 1" :disabled="dynamicForm.examples.length === 1" @click="removeItem('examples',exmaple)" style="margin-left:1%;" />
      </a-form-item>
      <!-- 使用示例-->
      <a-form-item label="其他说明">
        <a-textarea placeholder="填写函数的详细说明" v-model:value="docForm.description" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import {computed, defineProps, onBeforeUnmount, onMounted, reactive, ref, unref, useContext} from "vue";
import {storage} from "../../../../utils/storage";
import {message} from "ant-design-vue";
const {emit} = useContext()
const props = defineProps({
  docData: Object
})
onMounted(()=>{
  const record = props.docData.record
  if(record && record.doc){
    docForm.returns = record.doc.returns
    docForm.description = record.doc.description
    dynamicForm.params = record.doc.params
    dynamicForm.examples = record.doc.examples
    dynamicForm.returns = record.doc.returns
  }
})
/**
 *  data for doc form
 */
const returnTypes = ['Boolean','String','Number','Object','Function','Others']
const docForm = reactive({
  description:'',
})
const dynamicForm = reactive({
  params: [{name:'',description:'',type:'Boolean',key:0}],
  returns: [{name:'',description:'',type:'Boolean',key:0}],
  examples: [{name:'',description:'',key:Date.now()}]
});
/**
 *  remove items in dynamic form
 */
const removeItem = (type, item) => {
  let index = dynamicForm[type].indexOf(item);
  if (index !== -1) {
    dynamicForm[type].splice(index, 1);
  }
};
/**
 *  add items to dynamic form
 */
const addItem = (type) => {
  dynamicForm[type].push({
    name: '',
    description: '',
    type:'',
    key: Date.now(),
  });
};
/**
 *  data in the storage
 */
// keys in storage
const keyMap = computed(()=>{
  return storage.local.get('keyMap') || []
})
// names in storage
const nameMap = computed(()=>{
  return storage.local.get('nameMap') || []
})
const onFormOk = ()=>{
  const key = props.docData.record.key
  const localFunction = storage.local.get(key)
  const doc = unref(docForm)
  doc.examples = unref(dynamicForm).examples
  doc.params = unref(dynamicForm).params
  doc.returns = unref(dynamicForm).returns
  localFunction.doc = doc
  storage.local.set(key,localFunction)
    closeModal(true)
}

/**
 * close the modal
 */
const closeModal = (update)=>{
  emit('closeDocModal',update || false)
}

const focus = () => {
  console.log('focus');
};
const modalVisual = ref(true)

</script>

<style scoped>
.filer-wrap{
  width: 100%;
}
.doc-item-margin{
 margin-left: 1%;
 margin-right: 1%;
}
.doc-item-thirty{
  width: 30%;
}
::v-deep .ant-form-item-children{
  display: flex;
  justify-content: space-between;
}
</style>
